<head>
  <meta name="layout" content="doc4"/>
  <title>编辑档案</title>
  <style>

  .clearBoth {
      clear: both;
      line-height: 0px;
      padding:0;
      margin:0;
  }
    #pageTitleSec{
      background-color: #e5e5e5;
      padding: 6px 8px 4px 8px;
      margin-bottom: 5px;
    }
    .pageTitle{
      float: left;
      font-size: 14px;
      font-weight: bold;
      color: #333333;      
    }
    .pageFunc{
      float: right;
      width: 200px;
      text-align: right;
      padding-top: 2px;      
    }
    .tableForm{
      border: #d1d1d1 solid 1px;
      padding: 10px;
    }
    .tableForm input,select,label{
      display: inline;
    }
    .formTitle {
      text-align: right;
      vertical-align: top;
      font-weight: bold;
      padding-right: 10px;
      padding-bottom: 8px;      
    }
    .formValue {
      vertical-align: top;
      padding-bottom: 8px;
    }
  </style>
  <script type="text/javascript">
    $(function() {
      $("#tabs").tabs();
    });
  </script>

</head>
<body>
<div id="yui-main">
  <div class="yui-b">
    <div class="yui-ge">
      <div class="yui-u first">
        <div id="pageTitleSec">
          <div class="pageTitle">
            编辑个人档案
          </div>
          <div class="pageFunc">
            <g:link controller="b" action="show" id="${baby.id}">
              回到个人主页
            </g:link>
          </div>
          <div class="clearBoth"></div>
        </div>
        <g:if test="${flash.message}">
          <div class="message">${flash.message}</div>
        </g:if>
        <div class="demo">
          <div id="tabs">
            <ul>
              <li><a href="#tabs-1">宝宝资料</a></li>
              <li><a href="#tabs-2">宝宝爱好</a></li>
              <li><a href="#tabs-3">宝宝头像设置</a></li>
            </ul>
            <div id="tabs-1">
              <div id="middle_body_baby_profile" class="tableForm">
                <g:form controller="baby" action="updateBasic" method="POST">
                  <input type="hidden" name="id" value="${baby.id}"/>
                <table id="babyForm" >
                  <tr>
                    <td class="formTitle">大名：</td>
                    <td class="formValue">
                      <input type="text" value="${baby.realName}" class="longTextField" name="realName"/>
                      <span class="darkGreyText">最多十个中文字</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">乳名：</td>
                    <td class="formValue">
                      <input type="text" value="${baby.nickName}" class="longTextField" name="nickName"/>
                      <span class="darkGreyText">最多十个中文字</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">性别：</td>
                    <td class="formValue">
                      <g:radioGroup name="gender" labels="['男生','女生']" values="[true,false]" value="${baby.gender}">
                      ${it.label} ${it.radio}
                      </g:radioGroup>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">出生日期：</td>
                    <td class="formValue">
                      <g:datePicker id="birth" name="birth" value="${baby?.birth}" years="${2005..2010}"></g:datePicker>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle"></td>
                    <td class="formValue">
                    <br />
                    <input type="submit" class="btnGrey" value="保存" name="Submit" />
                    </td>                    
                  </tr>
                </table>
                </g:form>
              </div>
            </div>
            <div id="tabs-2">
              <div id="middle_body_favor" class="tableForm">
                <table id="babyFavorForm" >
                  <tr>
                    <td class="formTitle">奶粉：</td>
                    <td class="formValue">
                      <select>
                        <option>母乳喂养</option>
                        <option>雅培</option>
                        <option>雅鹿</option>
                        <option>三元</option>
                        <option>多美滋</option>
                        <option>其他</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">尿不湿：</td>
                    <td class="formValue">
                      <select>
                        <option>好奇</option>
                        <option>帮宝适</option>
                        <option>其他</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">洗发沐浴液：</td>
                    <td class="formValue">
                      <select>
                        <option>强生</option>
                        <option>其他</option>
                      </select>
                    </td>
                  </tr>                  
                  <tr>
                    <td class="formTitle">脸霜：</td>
                    <td class="formValue">
                      <select>
                        <option>强生</option>
                        <option>郁美净</option>
                        <option>其他</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">是否有保姆：</td>
                    <td class="formValue">
                      <input type="radio" value="true" class="noBorder" id="haveBabySitter" name="gender"/>
                      <label for="genderMale">有</label>
                      <input type="radio" value="false" class="noBorder" id="noBabySitter" name="gemder"/>
                      <label for="genderFemale">没有</label>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle"></td>
                    <td class="formValue">
                    <br />
                    <input type="submit" class="btnGrey" value="保存" name="Submit" />
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div id="tabs-3">
              <div id="middle_body_headimg" class="tableForm">
                <g:form controller="baby" action="updateHeadImg" id="${baby.id}" enctype="multipart/form-data">
                <table id="babyHeadImgForm" >
                  <tr>
                    <td class="formTitle">当前头像：</td>
                    <td class="formValue">
                      <cms:headImg baby="${baby}"/>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle">上传新照片：</td>
                    <td class="formValue">
                      <input type="file" name="img"/>
                    </td>
                  </tr>
                  <tr>
                    <td class="formTitle"></td>
                    <td class="formValue">
                    <br />
                    <input type="submit" class="btnGrey" value="上传" name="Submit" />
                    </td>
                  </tr>
                </table>
                </g:form>
              </div>
            </div>
          </div>

        </div><!-- End demo -->

      </div>
      <div class="yui-u">
        2222
      </div>
    </div>
  </div>
</div>
<div class="yui-b">
</div>
</body>
